<template>
  <div class="pie">
    <v-chart :data="data" class="pie">
      <v-scale y :options="yOptions" />
      <v-tooltip disabled />
      <v-pie :radius="0.85" series-field="name" />
      <v-legend :options="legendOptions" />
    </v-chart>
  </div>
</template>

<script>
  import { VChart, VLine, VArea, VTooltip, VLegend, VBar, VPie, VScale } from 'vux'
  const map = {
    '项目': '40%',
    '学习': '20%',
    '锻炼': '20%',
    '其他': '20%'
  }
  export default {
    name: "pie",
    components: {
      VChart,
      VLine,
      VArea,
      VTooltip,
      VLegend,
      VBar,
      VPie,
      VScale
    },
    data () {
      return {
        legendOptions: {
          position: 'right',
          itemFormatter (val) {
            return val + '  ' + map[val]
          }
        },
        yOptions: {
          formatter (val) {
            return val * 100 + '%'
          }
        },
        map,
        data: [
          { name: '芳华', percent: 0.4, a: '1' },
          { name: '妖猫传', percent: 0.2, a: '1' },
          { name: '机器之血', percent: 0.18, a: '1' },
          { name: '心理罪', percent: 0.15, a: '1' },
          { name: '寻梦环游记', percent: 0.05, a: '1' },
          { name: '其他', percent: 0.02, a: '1' }
        ]
      }
    }
  }
</script>

<style>

</style>
